<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="1280px" :title="`${drawerProps.title}详情`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="单据类型" prop="type">
        <el-select v-model="drawerProps.row!.type" placeholder="请选择类型" filterable clearable>
          <el-option v-for="item in drawerProps.typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="单位" prop="supplierId">
        <el-select v-model="drawerProps.row!.supplierId" placeholder="请选择供应商" filterable clearable>
          <el-option v-for="item in SupplierList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="InGoods">
        <div>
          <el-button type="primary" @click="addGoods">添加商品</el-button>
          <el-table :data="drawerProps.row.InGoods" :row-key="record => record.goodId" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="goodName" label="商品名" width="100" />
            <el-table-column prop="goodId" label="商品ID" width="80" />
            <el-table-column prop="price" label="规格">
              <template #default="scope">
                <el-table :data="scope.row.Sku" style="width: 100%">
                  <el-table-column prop="propertiesName" label="规格名" width="80" />
                  <el-table-column prop="price" label="进价" width="180">
                    <template #default="scop">
                      <el-input-number :min="0" v-model="scop.row.price"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tradePrice" label="批发价" width="180">
                    <template #default="scop">
                      <el-input-number :min="0" v-model="scop.row.tradePrice"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column prop="showPrice" label="售价" width="180">
                    <template #default="scop">
                      <el-input-number :min="0" v-model="scop.row.showPrice"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column prop="quantity" label="数量" width="180">
                    <template #default="scop">
                      <el-input-number :min="0" :max="scop.row.count" v-model="scop.row.quantity"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="50">
                    <template #default="scop">
                      <el-button @click="deleteSku(scop.row, scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button @click="deleteGoods(scope.row.goodId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="drawerProps.row!.remark" placeholder="请填写备注" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
  <SelectGoods ref="dialogRef" @update-goods="updateGoods" :goods="drawerProps.row!.InGoods" />
</template>

<script setup lang="ts" name="SpecDrawer">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { getList as getSupplier } from "@/api/modules/supplier";
import SelectGoods from "@/components/SelectGoods/index.vue";
const rules = reactive({
  name: [{ required: true, message: "请填写单位名" }]
});
// 抽屉属性
// interface DrawerProps {
//   title: string;title
//   isView?: boolean;isView?
//   row?: Partial<GoodsRecord.ResSpecList>;row?
//   api?: (params: any) => Promise<any>;api?
//   getTableList?: () => void;getTableList?
//   typeList?: any[];typeList?
// }
const drawerVisible = ref(false);
const drawerProps: any = ref({
  isView: false,
  title: "",
  row: {},
  typeList: []
});

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};
// const changeGoods = e => {
//   console.log(e)
// };

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  // return console.log(drawerProps.value.row, "drawerProps.value.row");
  drawerProps.value.row.InGoods = drawerProps.value.row.InGoods.map(item => {
    item.Sku.forEach(ite => {
      ite.num = ite.quantity - ite.oldNum;
    });
    return item;
  });
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `${drawerProps.value.title}单位成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};
// 供应商
const SupplierList: any = ref([]);
const getSupplierList = () => {
  let newParams = {
    pageNum: 1,
    pageSize: 100,
    name: ""
  };
  getSupplier(newParams).then(res => {
    console.log(res, "getSupplierList");
    if (res.code == 200) {
      SupplierList.value = res.data.list;
    }
  });
};
const deleteGoods = id => {
  drawerProps.value.row!.InGoods = drawerProps.value.row!.InGoods.filter(item => item.goodId !== id);
};
const deleteSku = (row, index) => {
  console.log(row, index);
  drawerProps.value.row!.InGoods[index].Sku = drawerProps.value.row!.InGoods[index].Sku.filter(item => item.id !== row.id);
};
// 添加商品
// 批量添加商品
const dialogRef = ref<InstanceType<typeof SelectGoods> | null>(null);
const addGoods = () => {
  console.log("添加商品");
  const params = {
    title: "商品",
    goodsId: drawerProps.value.row.InGoods
  };
  dialogRef.value?.acceptParams(params);
};
const updateGoods = e => {
  console.log("updateGoods", e);
  drawerProps.value.row!.InGoods = e.map(item => {
    item.Sku = item.Sku.map(ite => {
      ite.quantity = 0;
      return ite;
    });
    return item;
  });
};
onMounted(() => {
  getSupplierList();
});
defineExpose({
  acceptParams
});
</script>
